<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak>

  <md-content class="md-padding" layout="column">
    <h2 class="md-title">Use a custom chip template.</h2>

    <form name="fruitForm">
      <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly"
                md-removable="ctrl.removable" md-max-chips="5" placeholder="Enter a fruit..."
                input-aria-label="Fruit names">
        <md-chip-template>
          <strong>{{$chip}}</strong>
          <em>(fruit)</em>
        </md-chip-template>
      </md-chips>

      <div class="errors" ng-messages="fruitForm.fruitName.$error">
        <div ng-message="md-max-chips">Maximum number of chips reached.</div>
      </div>
    </form>

    <br/>
    <h2 class="md-title">Use the default chip template.</h2>

    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable">
    </md-chips>

    <br/>
    <h2 class="md-title">Use ng-change and add-on-blur</h2>

    <md-chips ng-model="ctrl.ngChangeFruitNames" md-add-on-blur="true" readonly="ctrl.readonly"
              ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)" input-aria-label="Fruit names"
              md-removable="ctrl.removable"></md-chips>

    <br/>
    <h2 class="md-title">Make chips editable.</h2>

    <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly"
              md-removable="ctrl.removable" md-enable-chip-edit="true"
              input-aria-label="Fruit names"></md-chips>

    <br/>
    <h2 class="md-title">Use Placeholders and override hint texts.</h2>

    <md-chips
        ng-model="ctrl.tags"
        readonly="ctrl.readonly"
        md-removable="ctrl.removable"
        placeholder="Enter a tag"
        delete-button-label="Remove Tag"
        delete-hint="Press delete to remove tag"
        md-added-message="was created"
        md-removed-message="was deleted"
        secondary-placeholder="+Tag"
        input-aria-label="Tags"
        container-hint="Chips container. Press the right and left arrow keys to change tag selection."
        container-empty-hint="Chips container. Enter the text area, start typing, and then press enter when done to add a tag.">
    </md-chips>

    <br/>
    <h2 class="md-title">Display an ordered set of objects as chips (with custom template).</h2>
    <p>Note: the variables <code>$chip</code> and <code>$index</code> are available in custom chip templates.</p>

    <md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="ctrl.readonly"
        md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable"
        input-aria-label="Vegetables">
      <md-chip-template>
        <span>
          <strong>[{{$index}}] {{$chip.name}}</strong>
          <em>({{$chip.type}})</em>
        </span>
      </md-chip-template>
      <button md-chip-remove class="md-primary vegetablechip" aria-label="Remove {{$chip.name}}">
        <md-icon md-svg-icon="md-close"></md-icon>
      </button>
    </md-chips>

    <br/>
    <md-checkbox ng-model="ctrl.readonly">Readonly</md-checkbox>
    <md-checkbox ng-model="ctrl.removable">
      Removable (<code>{{ctrl.removable === undefined ? 'undefined' : ctrl.removable}}</code>)
    </md-checkbox>
    <p class="md-caption">
      <b>Note</b>: When md-removable is undefined, readonly automatically sets md-removable to false.
    </p>
  </md-content>
</div>
